import React, { useEffect, useState } from 'react'
import { PageHeader, Descriptions } from 'antd'
import { HeartTwoTone } from '@ant-design/icons'
import moment from 'moment'
import { getNewsInfo, updateNewsInfo } from '@api'

export default function NewDetail(props) {
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  const [newsInfo, setnewsInfo] = useState(null)
  /*---------------------------------------useEffect---------------------------------------------------------------------------*/
  /*---------------------------------------useEffect---------------------------------------------------------------------------*/
  /*---------------------------------------useEffect---------------------------------------------------------------------------*/
  /*---------------------------------------useEffect---------------------------------------------------------------------------*/
  useEffect(() => {
    // 获取详情
    getNewsInfo({
      id: props.match.params.id,
      _expand: ['category', 'role']
    }).then(res => {
      setnewsInfo({
        ...res.data,
        view: res.data.view + 1
      })
      // 浏览+1
      updateNewsInfo({
        id: props.match.params.id,
        view: res.data.view + 1
      }).then((res) => {
        console.log(res);
      })
    })
  }, [])
  /*---------------------------------------方法---------------------------------------------------------------------------*/
  /*---------------------------------------方法---------------------------------------------------------------------------*/
  /*---------------------------------------方法---------------------------------------------------------------------------*/
  /*---------------------------------------方法---------------------------------------------------------------------------*/
  const handleStar = () => {
    setnewsInfo({
      ...newsInfo,
      star: newsInfo.star + 1
    })
    updateNewsInfo({
      id: props.match.params.id,
      star: newsInfo.star + 1
    })
  }
  /*---------------------------------------jsx---------------------------------------------------------------------------*/
  /*---------------------------------------jsx---------------------------------------------------------------------------*/
  /*---------------------------------------jsx---------------------------------------------------------------------------*/
  /*---------------------------------------jsx---------------------------------------------------------------------------*/
  return (
    <div>
      {
        newsInfo ?
          <div>
            <PageHeader onBack={() => window.history.back()} title={newsInfo.title} subTitle={<div> {newsInfo.category.title} <HeartTwoTone twoToneColor="#eb2f96" onClick={() => handleStar()} /> </div>} >
              <Descriptions size="small" column={3}>
                <Descriptions.Item label="创建者">{newsInfo.author}</Descriptions.Item>
                <Descriptions.Item label="发布时间">{newsInfo.publishTime ? moment(newsInfo.publishTime).format("YYYY/MM/DD HH:mm:ss") : "-"}</Descriptions.Item>
                <Descriptions.Item label="区域">{newsInfo.region}</Descriptions.Item>
                <Descriptions.Item label="访问数量">{newsInfo.view}</Descriptions.Item>
                <Descriptions.Item label="点赞数量">{newsInfo.star}</Descriptions.Item>
                <Descriptions.Item label="评论数量">0</Descriptions.Item>
              </Descriptions>
            </PageHeader>
            <div dangerouslySetInnerHTML={{ __html: newsInfo.content }} style={{ margin: "0 24px", border: "1px solid gray" }} />
          </div>
          :
          ''
      }
    </div>
  )
}
